<template>
  <h2>仓库列表</h2>
  <div style="text-align: left">
    <el-button type="primary" @click="openStoreDialog">添加仓库</el-button>
  </div>
  <!-- table组件 -->
  <el-table :data="storeList" style="width: 100%">
    <el-table-column  prop="storeName" label="仓库名称"/>
    <el-table-column prop="storeNum" label="仓库编号" />
    <el-table-column prop="storeAddress" label="仓库地址" />
    <el-table-column prop="concat" label="联系人"  />
    <el-table-column prop="phone" label="联系电话" />

    <el-table-column fixed="right" label="操作" width="240">
      <template #default="scope">
        <el-button link type="primary" size="small"
                   @click="openEditStore(scope.row)">修改</el-button>
        <el-button link type="primary" size="small"
                   @click="deleteStore(scope.row.storeId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
      small
      background
      :page-size="3"
      :pager-count="10"
      layout="prev, pager, next"
      :total="total"
      class="mt-4" @current-change="handlerStorePageChange"/>

  <!--  添加仓库信息对话框 -->
  <el-dialog
      v-model="dialogStoreVisible"
      width="80%"
  >
    <h2>修改客户信息</h2>

    <!-- 对话框中添加form -->
    <el-form :model="storeForm" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="仓库名称" prop="storeName">
        <el-input v-model="storeForm.storeName" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="仓库编号" prop="storeNum">
        <el-input v-model="storeForm.storeNum" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="仓库地址"prop="storeAddress">
        <el-input v-model="storeForm.storeAddress" style="width: 80%"/>
      </el-form-item>

      <el-form-item label="联系人" prop="concat">
        <el-input v-model="storeForm.concat" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="storeForm.phone" style="width: 80%"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="subStoreForm">保存</el-button>
        <el-button @click="dialogStoreVisible=false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import { request } from '../utils/request'
import {ElMessage} from "element-plus";
//声明列表集合数据
const storeList=ref([]);
//声明total总记录数
const total=ref(0);
//定义函数发生请求，加载列表
function queryStoreList(pageNum){
  request({ url: `http://localhost:8081/storePageList?pageNum=${pageNum}`, method: 'get' })
      .then((response)=>{
        storeList.value=response.data.storeList;
        total.value=response.data.total;
      })
      .catch((err)=>{
        console.log(err);
      })
}
//加载调用
onMounted(function(){
  queryStoreList(1);
});
//定义分页按钮回调函数
function handlerStorePageChange(pageNum){
  queryStoreList(pageNum);
}
/////////////////////////添加仓库信息//////////////////////////////////
//声明对话框状态
const dialogStoreVisible=ref(false);
//声明表单数据
const storeForm=reactive({
  storeName:'',
  storeNum:'',
  storeAddress:'',
  concat:'',
  phone:''
});

const formRef = ref(null);

const rules = {
  storeName: [
    { required: true, message: '请输入仓库名称', trigger: 'blur' }
  ],
  storeNum: [
    { required: true, message: '请输入仓库编号', trigger: 'blur' }
  ],
 storeAddress: [
    { required: true, message: '请输入仓库地址', trigger: 'blur' }
  ],
  concat: [
    { required: true, message: '请输入联系人', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
};




//
var url="";
//声明函数打开添加仓库信息对话
function openStoreDialog(){
  dialogStoreVisible.value=true;
  //保存添加接口
  url="http://localhost:8081/saveStore"
}
//定义函数提交仓库信息保存的请求
function subStoreForm(){
  formRef.value.validate((valid) => {
    if (!valid) return;
  request({ url, method: 'post', data: storeForm })
      .then((response)=>{
        if(response.data.code==200){
          //刷新列表
          queryStoreList(1);
          //关闭对话框
          dialogStoreVisible.value=false;
          //清空表单
          storeForm.storeName='';
          storeForm.storeNum='';
          storeForm.storeAddress='';
          storeForm.concat='';
          storeForm.phone='';
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      });
    });
}
//实现仓库信息的回显
function openEditStore(row){
  //url保存更新接口
  url="http://localhost:8081/updateStore";
  dialogStoreVisible.value=true;
  //将当前行数据赋值给表单进行回显
  storeForm.storeName=row.storeName;
  storeForm.storeNum=row.storeNum;
  storeForm.storeAddress=row.storeAddress;
  storeForm.concat=row.concat;
  storeForm.phone=row.phone;
  //表单id属性赋值
  storeForm.storeId=row.storeId;
}
//定义函数发生删除的ajax请求
function deleteStore(id){
  request({ url: `http://localhost:8081/deleteStore/${id}`, method: 'get' })
      .then((response)=>{
        if(response.data.code==200){
          //刷新
          queryStoreList(1);
        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      })
}
</script>

<style scoped>

</style>